<template>
  <div class="container" v-loading="status_loading">
    <el-row type="flex" class="margin-10">
      <el-col :span="18" align="left">
        <div class="grid-content bg-purple">
          <div class="grid-content bg-purple-dark">
            <el-form :inline="true" :model="formInline" class="demo-form-inline form-height">
              <el-form-item :label="$t('m.page.location')+$t('m.code')">
                <el-input maxlength="20" show-word-limit v-model="formInline.code" placeholder="输入库位编码"></el-input>
              </el-form-item>
              <el-form-item :label="$t('m.state')">
                <el-select @change="selectState" v-model="formInline.state" :placeholder="$t('m.choose')">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">{{$t('m.query')}}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
      <el-col :span="6" align="right">
        <div class="grid-content bg-purple form-height">
          <el-button type="primary" @click="increase">{{$t('m.add')}}</el-button>
          <el-button type="primary" @click="editState">修改状态</el-button>
          <el-button type>导入</el-button>
          <el-button type @click="export2Excel()">导出</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="ellipse"></div>
    <el-row :gutter="20">
      <el-col :span="4">
        <el-collapse v-model="activeName" accordion @change="getPartition">
          <el-collapse-item
            v-for="(item,index) in warehouse"
            :key="index"
            :title="item.name"
            :name="item.id"
          >
            <!-- <el-checkbox-group v-model="checkList">
              <el-checkbox
              @change="single"
                class="block"
                v-for="(item,i) in allArea[index]"
                :key="i"
                :value="item.partitionid"
                :label="item.partitionid"
              >{{item.partitionname}}</el-checkbox>

            </el-checkbox-group>-->
            <el-radio-group v-model="radio" v-loading="listLoading">
              <el-radio
                @change="radioClick"
                class="block"
                v-for="(item,i) in partition"
                :label="item.id"
                :key="i"
              >{{item.name}} {{item.code}}</el-radio>
            </el-radio-group>
          </el-collapse-item>
        </el-collapse>
      </el-col>
      <el-col :span="20" v-loading="contentLoading">
         <el-table
          ref="table"
          :data="tableData"
          stripe
          empty-text
          fits
          @row-click="rowClick"
          style="width: 100%"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
        >
          >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="locationcode" :label="$t('m.page.location')+$t('m.code')" width="200"></el-table-column>
          <el-table-column :label="$t('m.state')" width="100" align="center">
            <template slot-scope="scope">
              <!-- <el-button type="primary" :loading="true">加载中</el-button> -->
              <span v-if="scope.row.state==0">已停用</span>
              <span v-if="scope.row.state==1">已启用</span>
              <span v-if="scope.row.state==2">已占用</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="extent" label="长度" width="120"></el-table-column>
          <el-table-column align="center" prop="width" label="宽度" width="120"></el-table-column>
          <el-table-column align="center" prop="height" label="高度" width="120"></el-table-column>
          <el-table-column align="center" prop="maxinventory" label="最大库存量" width="120"></el-table-column>
          <el-table-column align="center" prop="partitionname" label="所在库区"></el-table-column>
          <el-table-column align="center" prop="warehousename" label="所在仓库"></el-table-column>

          <el-table-column :label="$t('m.operation')" width="170" align="center">
            <template slot-scope="scope">
              <el-button
                v-if="scope.row.state==1||scope.row.state==2"
                type="primary"
                @click="open(scope.row, '编辑', 'edit', true)"
                size="mini"
              >{{$t('m.edit')}}</el-button>
              <el-button
                type="primary"
                v-if="scope.row.state==0||scope.row.state==2"
                size="mini"
                @click="handleState1(scope.$index, scope.row)"
              >{{$t('m.start')}}</el-button>
              <el-button
                type="primary"
                v-if="scope.row.state==1"
                size="mini"
                @click="handleState2(scope.$index, scope.row)"
              >{{$t('m.stop')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="currentChange"
          style="margin-top:20px"
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="currentPage"
          :total="total"
        ></el-pagination>
      </el-col>
    </el-row>

    <!-- 库位编辑 dialog 开始 -->
    <el-dialog :close-on-click-modal="false" width="600px" title="编辑" :visible.sync="dialogFormVisible">
      <el-form :rules="ruleFormEdit" ref="ruleFormEdit" size="mini" :model="form">
        <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="warehousename" align="left">
          <el-select
            disabled
            @change="selectWarehouse"
            v-model="form.warehousename"
            :placeholder="$t('m.choose')"
          >
            <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库区名称" :label-width="formLabelWidth" prop="partitionname" align="left">
          <el-select
            disabled
            @change="selectPartition"
            v-model="form.partitionname"
            :placeholder="$t('m.choose')"
          >
            <el-option v-for="item in partition" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('m.index')" :label-width="formLabelWidth" prop="partitioncode">
          <el-input disabled size="mini" v-model="form.partitioncode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="通道" :label-width="formLabelWidth" prop="channel">
          <el-input size="mini" v-model="form.channel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在货架" :label-width="formLabelWidth" prop="shelves">
          <el-input size="mini" v-model="form.shelves" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在层" :label-width="formLabelWidth" prop="level">
          <el-input size="mini" v-model="form.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在格" required :label-width="formLabelWidth" prop="grating">
          <el-input size="mini" v-model="form.grating" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="识别码" :label-width="formLabelWidth" prop="identificationcode">
          <el-input size="mini" v-model="form.identificationcode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="长" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input @change="getSize" size="mini" v-model="form.extent" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>

        <el-form-item label="宽" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input @change="getSize" size="mini" v-model="form.width" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item label="高" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input @change="getSize" size="mini" v-model="form.height" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item label="体积" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <span>{{size}}</span>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm³</el-col>
        </el-form-item>
        <el-form-item label="最大库存量" :label-width="formLabelWidth" prop="maxinventory">
          <el-input size="mini" v-model="form.maxinventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="不同SKU数" :label-width="formLabelWidth" prop="differentsku">
          <el-input size="mini" v-model="form.differentsku" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="库位管理员"
          :label-width="formLabelWidth"
          prop="locationtouserList"
          align="left"
        >
          <!-- <el-select
            @change="selectUserOne"
            v-model="form.locationtouserList[0].username"
            :placeholder="$t('m.choose')"
          >
            <el-option v-for="item in user" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>-->
          <div
            v-for="(item,i) in form.locationtouserList"
            :key="i"
            :value="item.username"
          >{{item.username}}</div>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="editCancel">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="change()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 库位编辑 dialog 结束 -->

    <!-- 库位新增 dialog 开始 -->
    <el-dialog :close-on-click-modal="false" width="600px" title="添加" :visible.sync="dialogFormVisible1">
      <el-form :rules="ruleFormAdd" ref="ruleFormAdd" size="mini" :model="increaseForm">
        <el-form-item label="仓库名称" :label-width="formLabelWidth" prop="warehousename" align="left">
          <el-select
            @change="selectWarehouse"
            v-model="increaseForm.warehousename"
            :placeholder="$t('m.choose')"
          >
            <el-option v-for="item in warehouse" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库区名称" :label-width="formLabelWidth" prop="partitionname" align="left">
          <el-select
            @change="selectPartition"
            v-model="increaseForm.partitionname"
            :placeholder="$t('m.choose')"
          >
            <el-option v-for="item in partition" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库区编号" :label-width="formLabelWidth">
          <!-- <el-input disabled size="mini" v-model="increaseForm.partitioncode" autocomplete="off"></el-input> -->
          <div align="left">{{increaseForm.partitioncode}}</div>
        </el-form-item>
        <el-form-item label="通道" :label-width="formLabelWidth" prop="channel">
          <el-input size="mini" v-model="increaseForm.channel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在货架" :label-width="formLabelWidth" prop="shelves">
          <el-input size="mini" v-model="increaseForm.shelves" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在层" :label-width="formLabelWidth" prop="level">
          <el-input size="mini" v-model="increaseForm.level" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所在格" required :label-width="formLabelWidth">
          <el-col :span="11">
            <el-form-item prop="mingrating" style="margin-bottom:0">
              <el-input size="mini" v-model="increaseForm.mingrating" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">~</el-col>
          <el-col :span="11">
            <el-form-item prop="maxgrating" style="margin-bottom:0">
              <el-input size="mini" v-model="increaseForm.maxgrating" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="识别码" :label-width="formLabelWidth" prop="identificationcode">
          <el-input size="mini" v-model="increaseForm.identificationcode" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="长" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input
              @change="getSize"
              size="mini"
              v-model="increaseForm.extent"
              autocomplete="off"
            ></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>

        <el-form-item label="宽" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input @change="getSize" size="mini" v-model="increaseForm.width" autocomplete="off"></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item label="高" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <el-input
              @change="getSize"
              size="mini"
              v-model="increaseForm.height"
              autocomplete="off"
            ></el-input>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm</el-col>
        </el-form-item>
        <el-form-item label="体积" :label-width="formLabelWidth" align="left">
          <el-col :span="22">
            <span>{{size}}</span>
          </el-col>
          <el-col :span="2" style="padding-left:10px">cm³</el-col>
        </el-form-item>
        <el-form-item label="最大库存量" :label-width="formLabelWidth" prop="maxinventory">
          <el-input size="mini" v-model="increaseForm.maxinventory" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="不同SKU数" :label-width="formLabelWidth" prop="differentsku">
          <el-input size="mini" v-model="increaseForm.differentsku" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div class="btns">
        <el-button size="mini" @click="dialogFormVisible1 = false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="handIncrease()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 库位新增 dialog 结束 -->
    <!-- 批量修改状态开始 -->
    <el-dialog width="600px" title="修改暂存区状态" :visible.sync="dialogFormVisible2">
      <el-select size="mini" @change="setState" v-model="stateValue" :placeholder="$t('m.choose')">
        <el-option v-for="item in state" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <div class="btns">
        <el-button size="mini" @click="dialogFormVisible2 = false">{{$t('m.cancel')}}</el-button>
        <el-button size="mini" type="primary" @click="handleState()">{{$t('m.confirm')}}</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改状态结束 -->
  </div>
</template>

<script>
import db from '@/utils/db'
import common from '@/utils/common'

export default {
  name:'temporary',

  data(){
    let checkNum = (rule, value, callback) => {
      setTimeout(() => {
        //console.log(typeof(value));
        if (!Number.isInteger(Number(value))){
          callback(new Error('请输入数字值'))
        } else {
          if (value < this.increaseForm.mingrating){
            callback(new Error('必须大于最小值'))
          } else {
            callback()
          }
        }
      }, 0)
    }
    return {
      activeName:'1',
      state:[
        {
          value:'0',
          label:'停用'
        },
        {
          value:'1',
          label:'启用'
        },
        {
          value:'2',
          label:'占用'
        }
      ],
      temporarytype:[
        {
          value:'1',
          label:'入库库位'
        },
        {
          value:'2',
          label:'出库分拣区'
        }
      ],
      status_loading:true,
      formInline:{
        code:'',
        state:''
      },
      tableData:[],
      total:0, //总条数
      pageSize:10, //每页显示条数
      currentPage:1,
      dialogFormVisible:false,
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      ruleFormAdd:{
        warehousename:[
          { required:true, message:'请选择仓库名称', trigger:'change' }
        ],
        partitionname:[
          { required:true, message:'请选择库区名称', trigger:'change' }
        ],
        channel:[{ required:true, message:'请输入通道', trigger:'blur' }],
        shelves:[
          { required:true, message:'请输入所在货架', trigger:'blur' }
        ],
        level:[{ required:true, message:'请输入所在层', trigger:'blur' }],
        mingrating:[
          { required:true, message:'请输入最小值', trigger:'blur' },
          { validator:checkNum, trigger:'blur' }
        ],

        maxgrating:[
          { required:true, message:'请输入最大值', trigger:'blur' },
          { validator:checkNum, trigger:'blur' }
        ],
        maxinventory:[
          { required:true, message:'请输入最大库存量', trigger:'blur' }
        ],
        differentsku:[
          { required:true, message:'请输入不同SKU数', trigger:'blur' }
        ]
      },
      ruleFormEdit:{
        warehousename:[
          { required:true, message:'请选择仓库名称', trigger:'change' }
        ],
        partitionname:[
          { required:true, message:'请选择库区名称', trigger:'change' }
        ],
        channel:[{ required:true, message:'请输入通道', trigger:'blur' }],
        shelves:[
          { required:true, message:'请输入所在货架', trigger:'blur' }
        ],
        level:[{ required:true, message:'请输入所在层', trigger:'blur' }],
        grating:[{ validator:checkNum, trigger:'blur' }],
        maxinventory:[
          { required:true, message:'请输入最大库存量', trigger:'blur' }
        ],
        differentsku:[
          { required:true, message:'请输入不同SKU数', trigger:'blur' }
        ]
      },
      warehouse:[],
      user:[],
      form:{
        channel:'',
        differentsku:0,
        extent:0,
        grating:'',
        height:0,
        identificationcode:'',
        level:'',
        locationcode:'',
        locationid:0,
        locationtouserList:[
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          },
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          }
        ],
        locationtousernames:[''],
        maxinventory:0,
        page:0,
        partitioncode:'',
        partitionid:0,
        partitionname:'',
        rows:0,
        shelves:'',
        state:0,
        warehouseid:0,
        warehousename:'',
        width:0
      },
      increaseForm:{
        channel:'',
        differentsku:null,
        extent:null,
        height:null,
        identificationcode:'',
        level:'',
        locationcode:'',
        locationid:null,
        locationtouserList:[
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          },
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          }
        ],
        locationtousernames:[''],
        maxgrating:'',
        maxinventory:null,
        mingrating:'',
        page:0,
        partitioncode:'',
        partitionid:0,
        partitionname:'',
        rows:0,
        shelves:'',
        state:0,
        warehouseid:0,
        warehousename:'',
        width:null
      },
      formLabelWidth:'100px',
      options:[
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:'0',
          label:'停用'
        },
        {
          value:'1',
          label:'启用'
        },
        {
          value:'2',
          label:'占用'
        }
      ],
      size:0, //体积,
      type:'', //库位类型
      stateValue:'', //状态
      partition:[],
      allArea:[],
      indexNum:null,
      radio:null,
      partitionid:null,
      listLoading:false,
      contentLoading:false,
      locationid:null,
      multipleSelection:[]
    }
  },
  computed:{
    name(){
      return this.formInline.code
    }
  },
  watch:{
    dialogFormVisible(old, newValue){
      let pageSize = this.pageSize

      let currentPage = this.currentPage

      this.init(currentPage, pageSize)
    },

    dialogFormVisible1(old, newValue){
      let pageSize = this.pageSize

      let currentPage = this.currentPage
      this.increaseForm = {
        channel:'',
        differentsku:null,
        extent:null,
        grating:'',
        height:null,
        identificationcode:'',
        level:'',
        locationcode:'',
        locationid:0,
        locationtouserList:[
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          },
          {
            id:0,
            locationid:0,
            userid:0,
            username:''
          }
        ],
        locationtousernames:[''],
        maxgrating:'',
        maxinventory:null,
        mingrating:'',
        page:0,
        partitioncode:'',
        partitionid:0,
        partitionname:'',
        rows:0,
        shelves:'',
        state:0,
        warehouseid:0,
        warehousename:'',
        width:null
      }
      this.init(currentPage, pageSize)
    }
  },
  methods:{
    search(){
      let pageSize = this.pageSize

      let currentPage = this.currentPage

      this.init(currentPage, pageSize)
    },
    handleClick(row){
      const $table = this.$refs.table

      $table.toggleRowExpansion(row)
      $table.toggleRowSelection(row)
    },
    currentChange(page){
      let pageSize = this.pageSize
      let currentPage = page
      this.currentPage = currentPage
      console.log(page)
      this.init(currentPage, pageSize)
    },
    handleState1(index, row){
      this.tableData[index].state = 1
      this.changeStatus1(index, row)
    },
    handleState2(index, row){
      this.tableData[index].state = 0
      this.changeStatus2(index, row)
    },
    init(page, size){
      let that = this
      that.contentLoading = true
      let code = this.formInline.code
      let state = this.formInline.state
      that
        .$axios({
          method:'get',
          url:'/locationinfo/page',
          params:{
            page:page,
            rows:size,
            state:state,
            locationcode:code,
            partitionid:that.partitionid
          }
        })
        .then(({data})=> {
          for (let i = 0; i < data.records.length; i++){
            data.records[
              i
            ].createdate = common.timestampToTime(
              data.records[i].createdate
            )
            data.records[
              i
            ].modifydate = common.timestampToTime(
              data.records[i].modifydate
            )
          }

          that.tableData = data.records
          that.total = data.total
          that.pageSize = data.size
          that.contentLoading = false
        })
    },

    //停用
    changeStatus2(index, row){
      let id = row.locationid
      let formdata = new FormData()
      formdata.append('status', 0)
      this.$axios({
        method:'put',
        url:`/locationinfo/swt/${id}/0`,
        data:formdata
      }).then(()=> {
        this.tableData[index].status = 0
      })
    },

    //启用
    changeStatus1(index, row){
      let id = row.locationid
      let formdata = new FormData()
      formdata.append('status', 1)
      this.$axios({
        method:'put',
        url:`/locationinfo/swt/${id}/1`,
        data:formdata
      }).then(()=> {
        this.tableData[index].status = 1
      })
    },
    setState(id){
      this.form.state = null
      this.form.state = id
    },
    open(row){
      this.locationid = row.locationid

      this.form = row
      if (row.height && row.width && row.extent){
        this.size = row.height * row.width * row.extent
      }
      if (row.state == '1'){
        this.stateValue = '启用'
      }
      if (row.state == '0'){
        this.stateValue = '停用'
      } else {
        this.stateValue = '占用'
      }
      this.dialogFormVisible = true
    },
    change(){
      this.$refs['ruleFormEdit'].validate(valid => {
        if (valid){
          this.dialogFormVisible = false
          this.$axios({
            method:'put',
            url:'/locationinfo/update',
            data:this.form
          }).then(()=> {
            this.$message({
              showClose:true,
              message:this.$t('m.editSuccess'),
              type:'success',
              duration:1000
            })
            this.currentPage = 1
            this.init(1, this.pageSize)
          })
        }
      })
    },
    increase(){
      this.dialogFormVisible1 = true
      this.form.height = null
      this.form.width = null
      this.form.length = null
      this.size = 0
    },
    handIncrease(){
      this.$refs['ruleFormAdd'].validate(valid => {
        if (valid){
          this.dialogFormVisible1 = false
          this.$axios({
            method:'post',
            url:'/locationinfo/insert',
            data:this.increaseForm
          }).then(()=> {
            this.$message({
              showClose:true,
              message:this.$t('m.success'),
              type:'success',
              duration:1000
            })
            this.init(1, this.pageSize)
          })
        }
      })
    },
    editCancel(){
      this.dialogFormVisible = false
      let pageSize = this.pageSize

      let currentPage = this.currentPage

      this.init(currentPage, pageSize)
    },
    rowClick(row, column, event){

    },
    selectState(val){
      this.formInline.state = val
    },
    getWarehouse(){
      let that = this
      that.status_loading = true
      that
        .$axios({
          method:'get',
          url:'/warehouse/list'
        })
        .then(({data})=> {
          let all = data
          for (let i = 0; i < all.length; i++){
            that.warehouse.push({
              id:all[i].warehouseid,
              name:all[i].warehousename
            })
          }
          that.status_loading = false
        })
    },
    getUser(){
      this.$axios({
        method:'get',
        url:'/user/list'
      }).then(({data})=> {
        let all = data.list
        console.log(all)
        for (let i = 0; i < all.length; i++){
          this.user.push({
            id:all[i].id,
            name:all[i].username
          })
        }
      })
    },
    selectWarehouse(id){
      this.increaseForm.warehouseid = id
      this.increaseForm.warehousename = this.warehouse.filter(function(item){
        return item.id == id
      })[0].name
      this.form.warehouseid = id
      this.form.warehousename = this.warehouse.filter(function(item){
        return item.id === id
      })[0].name
      this.getPartition(id)
    },
    selectPartition(id){
      this.increaseForm.partitionid = id
      this.increaseForm.partitionname = this.partition.filter(function(item){
        return item.id == id
      })[0].name
      this.increaseForm.partitioncode = this.partition.filter(function(item){
        return item.id == id
      })[0].code
    },
    setType(id){
      this.increaseForm.type = id
      this.form.type = id
    },

    getSize(){
      if (
        this.increaseForm.height &&
        this.increaseForm.width &&
        this.increaseForm.extent
      ){
        this.size =
          Number(this.increaseForm.height) *
          Number(this.increaseForm.width) *
          Number(this.increaseForm.extent)
      }
      if (this.form.height && this.form.width && this.form.extent){
        this.size =
          Number(this.form.height) *
          Number(this.form.width) *
          Number(this.form.extent)
      }
    },
    //获取库区信息
    getPartition(id){
      if (id){
        this.listLoading = true
        this.$axios({
          method:'get',
          url:`/partition/list/${id}`
        }).then(({data})=> {
          this.listLoading = false
          let all = data.list
          this.partition = []
          this.increaseForm.partitionname = ''
          this.increaseForm.partitioncode = null
          for (let i = 0; i < all.length; i++){
            this.partition.push({
              id:all[i].partitionid,
              name:all[i].partitionname,
              code:all[i].partitioncode
            })
          }
        })
      }
    },
    radioClick(id){
      let that = this
      that.partitionid = id
      that.init(1, 10)
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    editState(){
      this.dialogFormVisible2 = true
    },
    handleState(){
      for (let i = 0; i < this.multipleSelection.length; i++){
        this.multipleSelection[i].state = this.stateValue
        this.dialogFormVisible2 = false
        this.$axios({
          method:'put',
          url:'/locationinfo/update',
          data:this.multipleSelection[i]
        }).then(()=> {
          this.$message({
            showClose:true,
            message:this.$t('m.editSuccess'),
            type:'success',
            duration:1000
          })
          this.currentPage = 1
          this.init(1, this.pageSize)
        })
      }
    },
    export2Excel(){
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/excel/Export2Excel')

        const tHeader = [
          '库位编码',
          '状态',
          '长度',
          '宽度',
          '高度',
          '最大库存量',
          '所在库区',
          '所在仓库'
        ]

        const filterVal = [
          'locationcode',
          'state',
          'extent',
          'width',
          'height',
          'maxinventory',
          'partitionname',
          'warehousename'
        ]

        const list = this.tableData

        const data = this.formatJson(filterVal, list)

        if (list.length > 0){
          export_json_to_excel(
            tHeader,
            data,
            '报表' + common.timestampToTime(new Date())
          )
        }else{
          this.$message({
            showClose:true,
            message:'请选择库区',
            type:'warning',
            duration:1000
          })
        }
      })
    },

    formatJson(filterVal, jsonData){
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  },
  mounted(){
    this.init(1, 10)
    this.getWarehouse()
    this.getUser()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
.el-table td,
.el-table th.is-leaf {
  border-bottom: none;
}
.el-collapse-item__header {
  font-size: 14px !important;
  padding-left: 20px;
}
.el-radio.block {
  display: block;
  text-align: left;
  margin-left: 30px;
  margin-bottom: 10px;
}
.el-collapse {
  height: 100%;
  overflow-y: scroll;
}
.el-collapse-item__content {
  text-align: left;
}
.el-radio-group {
  width: 100%;
}
</style>
